<template>
  <div>
    <!-- <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageMeta.pageTitle">
      <slot slot="action" name="action"></slot>
      <slot slot="content" name="headerContent"></slot>
      <slot slot="tag" name="tag"></slot>
      <div slot="content" v-if="!this.$slots.headerContent && pageMeta.description">
        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ pageMeta.description }}</p>
        <div class="link">
          <template v-for="(link, index) in pageMeta.linkList">
            <a :key="index" @click="() => { link.callback && link.callback() }">
              <a-icon :type="link.icon" />
              <span>{{ link.title }}</span>
            </a>
          </template>
        </div>
      </div>
      <slot slot="extra" name="extra">
        <div v-if="pageMeta.extraImage" class="extra-img">
          <img :src="pageMeta.extraImage"/>
        </div>
      </slot>
      <div slot="pageMenu">
        <div class="page-menu-tabs" v-if="pageMeta.tabs && pageMeta.tabs.length">
          <a-tabs :tabBarStyle="{margin: 0}" :activeKey="activePath" @change="handleTabChange">
            <a-tab-pane v-for="item in pageMeta.tabs" :key="item.key">
              <span slot="tab"><a-icon type="mail" />{{ item.title }}</span>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </page-header> -->
    <div class="content" :style="{marginTop: multiTab ? '24px' : ''}">
      <div class="main-content">
        <slot>
          <multi-tab v-if="multiTab"></multi-tab>
          <!-- <route-view ref="routeContent" /> -->
          <keep-alive v-if="multiTab">
            <BlankLayout ref="routeContent" />
          </keep-alive>
          <BlankLayout v-else ref="routeContent" />
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import { isEqual } from 'underscore'
import { mapState } from 'vuex'

const defaultPageMeta = {
  description: undefined,
  pageTitle: '',
  linkList: [],
  extraImage: undefined,
  tabs: []
}
export default {
  name: 'PageView',
  components: {
    PageHeader: () => import('@/components/PageHeader'),
    BlankLayout: () => import('./BlankLayout'),
    // RouteView: () => import('./RouteView'),
    MultiTab: () => import('@/components/MultiTab')
  },
  props: {
    title: {
      type: [String, Boolean],
      default: ''
    },
    directTabs: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      pageMeta: { ...defaultPageMeta },
      activePath: ''
    }
  },
  computed: {
    ...mapState({
      multiTab: state => state.app.multiTab
    })
  },
  // watch: {
  //   '$route': {
  //     handler: 'getActivePath',
  //     immediate: true
  //   }
  // },
  // updated () {
  //   this.getPageMeta()
  // },
  methods: {
    getPageMeta () {
      let pageMeta = {
        ...defaultPageMeta,
        tabs: this.directTabs
      }
      const title = this.title !== false ? (this.title || this.$route.meta.title) : ''
      const content = this.findPageContentDom(this.$refs.routeContent)
      // const content = this.$refs.routeContent && this.$refs.routeContent.$children[0]
      if (content) {
        pageMeta = !content.pageMeta ? {
          description: content.description || undefined,
          pageTitle: content.pageTitle,
          linkList: content.linkList || [],
          extraImage: content.extraImage || undefined,
          tabs: content.tabs || []
        } : content.pageMeta
      }
      if (pageMeta.pageTitle !== false && !pageMeta.pageTitle) {
        pageMeta.pageTitle = title
      }
      if (!isEqual(this.pageMeta, pageMeta)) {
        this.pageMeta = pageMeta
      }
    },
    // 查找页面内容元素
    findPageContentDom (dom) {
      if (!dom) {
        return undefined
      }
      if (dom.$refs.pageMainContent) {
        return dom
      }
      if (!dom.$children.length) {
        return undefined
      }
      return this.findPageContentDom(dom.$children[0])
    },
    // 获取当前路径和名称
    getActivePath ({ matched, path, meta }) {
      const bestPath = matched[matched.length - 1].path
      this.activePath = bestPath ? bestPath.split('/:')[0] : path
      this.pageMeta.pageTitle = meta.title
    },
    // 处理 tabs 切换
    handleTabChange (key) {
      const { query, params } = this.$route
      let path = key
      if (params.id) {
        path += '/' + params.id
      }
      this.$router.push({
        path,
        query
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .content {
    // margin: 24px 24px 0;
    .link {
      margin-top: 16px;
      &:not(:empty) {
        margin-bottom: 16px;
      }
      a {
        margin-right: 32px;
        height: 24px;
        line-height: 24px;
        display: inline-block;
        i {
          font-size: 24px;
          margin-right: 8px;
          vertical-align: middle;
        }
        span {
          height: 24px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  .page-menu-search {
    text-align: center;
    margin-bottom: 16px;
  }
  .page-menu-tabs {
    // margin-top: 48px;
  }

  .extra-img {
    margin-top: -60px;
    text-align: center;
    width: 195px;

    img {
      width: 100%;
    }
  }

  .mobile {
    .extra-img{
      margin-top: 0;
      text-align: center;
      width: 96px;

      img{
        width: 100%;
      }
    }
  }
</style>
